<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> jshow for bootstrap api</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="david zhang">
  <META NAME="Keywords" CONTENT="jshow bootstrap">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

	<link href="../misc/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="../misc/css/bootstrap-modal.css" rel="stylesheet" type="text/css" />
	<link href="../misc/css/joywindow.bootstrap.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="../misc/js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="../misc/js/bootstrap.min.js"></script>	
	<script type="text/javascript" src="../misc/js/bootstrap-modalmanager.js"></script>	
	<script type="text/javascript" src="../misc/js/bootstrap-modal.js"></script>
	<script type="text/javascript" src="../misc/js/bootbox.js"></script>	
	<script type="text/javascript" src="../misc/js/modal.manager.plugin1.0.js"></script>
	
	<!-- you can delete follow resource 以下两个可删除-->
	<script type="text/javascript" src="../misc/js/form.validate.js"></script>
	<script type="text/javascript" src="../misc/js/jshow.utils.js"></script>	

	<script type="text/javascript" src="../misc/other/prettify.js"></script>
	<link href="../misc/other/prettify.css" rel="stylesheet" type="text/css" />
 </HEAD>

 <BODY>
			<div class="navbar  navbar-invers">
			  <div class="navbar-inner">
				<a class="brand" href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
				<ul class="nav">
				  <li ><a href="index.html">首页</a></li>
				  <li><a href="modal.html">弹出窗口</a></li>
				  <li class="active"><a href="#">bootbox使用</a></li>
  				  <li><a href="messagebox.html">消息窗口使用</a></li>
  				  <li><a href="formvalidate.html">表单验证使用</a></li>
				</ul>
			  </div>
			</div>
		

	<div class="container-fluid">
	<div class="row-fluid">
		<div class="span2">
		</div>
	
		<div class="span10">


		<div class="hero-unit">
				<h1>
					bootbox窗口工具使用
				</h1>
				
				
				<div class="alert alert-error">
				  <button type="button" class="close" data-dismiss="alert">&times;</button>
				  <strong>强烈警告!</strong> 还是那句话，bootstrap基本功都木有的人滚粗! 等你学好了再回来使用吧，哈哈...
				</div>

				<p>
					下面我们来讲讲如何方便快捷的使用jshow for bootstrap的 bootbox窗口。
				</p>
				<p>
					<a class="btn btn-primary btn-large" href="http://git.oschina.net/zhangshibin1987/jshow-for-bootstrap">获取最新版本»»</a>
				</p>
			<hr/>	
				
			
			<h2>
				bootbox窗口是什么?
			</h2>
			<p>
				bootbox窗口就是基本的替代浏览器本身的alert,confirm窗口的工具。它的作用就是使整个系统的操作界面尽量统一。<br/>
				我在找了很多工具后，发现bootbox相当的简单和方便，当然你也可以自己实现自己的alert和confirm窗口，以此替换bootbox没有标题栏的缺陷。
			</p>
			
			

		</div>
		
		
		<hr/>
			<h2>
				一、bootbox窗口如何使用？
			</h2>
			
			<p>
				相当的简单，都是js简单调用即可，下面我们来试试！
			</p>
			<p>

			
			
<pre class="prettyprint linenums Lang-html">
&lt;a href="#nogo" id="bootbox-alert" class="btn btn-primary"&gt;调用bootbox的alert&lt;/a&gt;
&lt;a href="#nogo" id="bootbox-confirm" class="btn btn-primary"&gt;调用bootbox的confirm&lt;/a&gt;

&lt;script&gt;
	void function(j){
	
		//注册按钮事件
		j("#bootbox-alert").click(function(){  
			bootbox.alert('你点击了alert按钮',function(){
			  message_box.show('这是bootbox alert方法后的回调函数，也可以不要！');
			});
		});

		//注册按钮事件
		j("#bootbox-confirm").click(function(){
			bootbox.confirm('你确定执行这个操作么？',function(rs){
				if(rs){
					message_box.show('你点击了确定按钮！','success');
				}else{
					message_box.show('你取消了本次操作！');
				}
			});
		});
	}(jQuery);
&lt;/script&gt;
</pre>

效果如下：
	<a href="#nogo" id="bootbox-alert" class="btn btn-primary">调用bootbox的alert</a>
	<a href="#nogo" id="bootbox-confirm" class="btn btn-primary">调用bootbox的confirm</a>
 
 
 
<script>
void function(j){
	j("#bootbox-alert").click(function(){
		bootbox.alert('你点击了alert按钮',function(){
		   message_box.show('这是bootbox alert方法后的回调函数，也可以不要！');
		});
	});

	
	j("#bootbox-confirm").click(function(){
		bootbox.confirm('你确定执行这个操作么？',function(rs){
			if(rs){
				message_box.show('你点击了确定按钮！','success');
			}else{
			 message_box.show('你取消了本次操作！');
			}
		});
		
	});
}(jQuery);
</script>

			</p>

	 	</div>
	</div>
</div>
		
 
 


 
 
 
 
 </BODY>
</HTML>
<script>

$(document).ready(function(){
     prettyPrint();
})

</script>